import {
	Button,
	Collapse,
	Form,
	Row,
	Col,
	Input,
	Select,
	DatePicker,
	TreeSelect,
	Cascader,
	message,
	Steps,
	Radio,
	Tag,
	Space,
} from 'antd'
import React, {useState, useEffect, memo,useRef} from 'react'
import {history, connect} from 'umi'
import moment from 'moment'
import 'moment/locale/zh-cn'
import styles from './index.less'
import {translateDataToTree} from '@/utils/common/index'
import {getAllCitys, getCompany,processRecordSave} from '@/service/common/index'
import {scrollToAnchor} from '@/utils'
import {
	getOrderType,
	detail,
	approvalDetail,
	batchApproval,
	getOperatingRecord,
} from '@/service/marketing/commodity'
import CustomTable from '@/components/Table'
import {getCarTypeList} from '@/service/carMessage/list'
import {getDict} from '@/service/common/dict'
import {getMainCompanyList} from '@/service/system/company'
import OrderTypeOne from '../components/OrderTypeOne'
import OrderTypeTwo from '../components/OrderTypeTwo'
import OrderTypeThree from '../components/OrderTypeThree'
import {twoDecimalPattern} from '@/utils/common/validator'
import {auditStatus} from '../../dict'
import {GlobalState} from '@/models/global'
import Examine from '@/components/Examine'

const {Panel} = Collapse
const {TextArea} = Input
interface CityOption {
	value: string | number
	label: string
	children?: CityOption[]
}


const customizeHeader = (value: string) => (
	<div>
		<div className={styles.tip} />
		{value}
	</div>
)

const btnList: any = [
	{
		name: '基础信息',
		id: 'd1',
	},
	{
		name: '价格信息',
		id: 'd2',
	},
	{
		name: '司机奖励',
		id: 'd3',
	},
	{
		name: '渠道奖励',
		id: 'd4',
	},
	{
		name: '审批信息',
		id: 'd5',
	},
	{
		name: '操作记录',
		id: 'd6',
	},
]

export interface FixedBarProps {
	global: GlobalState
	user: {userId: any; orgId: any}
	dispatch: any
	location: any
}

const view = memo(
	({
		global: {currentRoute},
		dispatch,
		location,
		user: {userId, orgId},
	}: FixedBarProps) => {
		const routerQuery = location.query
		const [form] = Form.useForm()
		const [type, setType] = useState<string>()
		const [cityName, setCityName] = useState<string>()
		const [btnKey, setBtnKey] = useState<string>('d1')
		const examineRef = useRef<any>(null)

		const [orderType, setOrderType] = useState<any>([])
		const [mainCompany, setMainCompanyList] = useState<any>([])
		const [rentTypeId, setRentTypeId] = useState()
		// 公司
		const [companyData, setCompanyData] = useState<any[]>([])
		// 城市
		const [citysList, setCitysList] = useState<CityOption[]>([])
		const [carTypeList, setCarTypeList] = useState<any>([])
		const [dict, setDict] = useState({
			star_rating: [],
			Subsidy_Type: [],
		})
		// 自定义数据
		const [costitemList, setCostitemList] = useState<any[]>([])
		const [toExamineForm] = Form.useForm()

		// 流程记录
		const [itemsProcess, setItemsProcess] = useState<any[]>([])
		const [stepsCurrent, setStepsCurrent] = useState<any>(0)
		// 司机关联列表
		const [driverSourse, setDriverSourse] = useState<any[]>([])
		// 渠道关联列表
		const [channelSourse, setChannelSourse] = useState<any[]>([])
		// 操作历史
		const [optionSourse, setOptionSourse] = useState<any[]>([])
		const [optionTotal, setOptionTotal] = useState<any>()
		const [optionParams, setOptionParams] = useState({
			current: 1,
			size: 10,
		})
		const [optionLoading, setOptionLoading] = useState(false)
		/** 获取订单类型列表 */
		const getOrderTypeFun = () => {
			getOrderType().then((res: any) => {
				if (res?.success) {
					setOrderType(() => res?.data)
				}
			})
		}

		// 初始化-城市
		const getCitysFun = () => {
			getAllCitys().then((res: any) => {
				if (res?.data) {
					setCitysList(() => res.data)
				}
			})
		}

		/** 获取所属公司数据 */
		const onCompany = () => {
			getCompany({merchantId: ''}).then((res: any) => {
				if (res?.success) {
					const data = res?.data
					res?.data?.forEach(
						(
							item: {disabled: boolean; type: any},
							index: number,
						) => {
							if (item.type !== 0) {
								data[index].disabled = true
							}
						},
					)
					const list = translateDataToTree(data)
					setCompanyData(list as any)
				}
			})
		}
		// 获取品牌车系
		const onCarTypeListFun = () => {
			getCarTypeList().then((res: any) => {
				if (res?.success) {
					const list = res?.data?.map((item: any) => {
						const newItem = item
						newItem.id = newItem?.id?.toString()
						return newItem
					})
					setCarTypeList(() => list)
				}
			})
		}

		// 获取主体数据
		const onMainCompanyeListFun = () => {
			getMainCompanyList().then((res: any) => {
				if (res?.success) {
					const list = res?.data?.map((item: any) => {
						const newItem = item
						newItem.id = newItem?.id?.toString()
						return newItem
					})
					setMainCompanyList(() => list)
				}
			})
		}
		// 获取操作记录数据
		const onOperatingListFun = (id: any) => {
			setOptionLoading(true)
			getOperatingRecord({businessType: 17, businessId: id,...optionParams}).then(
				(res: any) => {
					if (res?.success) {
						if (res?.success) {
							setOptionSourse(() => res?.data?.records)
							setOptionTotal(() => res?.data?.total)
						}
						setOptionLoading(false)
					}
				},
			)
		}

		// 初始化无条件接口
		useEffect(() => {
			getOrderTypeFun()
			onCarTypeListFun()
			onMainCompanyeListFun()
			getCitysFun()
			getDict(
				{
					dictKeys: ['star_rating', 'Subsidy_Type'],
				},
				(res: any) => {
					setDict(res)
				},
			)
		}, [])

		// 初始化与组织机构关联接口
		useEffect(() => {
			onCompany()
		}, [orgId])

		const getTableList = (list: any) => {
			const rentDriverVOList = list
				?.map((item: any) => item?.rentDriverVOList)
				.reduce((a: any, b: any) => a.concat(b))
			setDriverSourse(() => rentDriverVOList)
			const rentChannelVOList = list
				?.map((item: any) => item?.rentChannelVOList)
				.reduce((a: any, b: any) => a.concat(b))
			setChannelSourse(() => rentChannelVOList)
		}

		// 初始化-详情数据
		const getDetail = (id: string) => {
			detail({id}).then((res: any) => {
				if (res?.success) {
					form.setFieldsValue({
						...res.data,
						beginTime: moment(res?.data?.beginTime),
						endTime: moment(res?.data?.endTime),
						city: [res?.data?.provinceId, res?.data?.cityId],
					})
					setRentTypeId(() => res?.data?.rentTypeId)
					setCityName(() => res?.data?.cityName)
					setCostitemList(() => res?.data?.rentSchemeVOList)
					getTableList(res?.data?.rentSchemeVOList)
					onOperatingListFun(res?.data?.id)
				}
			})
		}

		// 审核工作流详情
		const getApprovalDetail = (id: string) => {
			approvalDetail({id}).then((res: any) => {
				if (res?.success) {
					const step = res?.data?.map(
						(item: {
							activityName: string
							assigneeName: string
							endTime: string
							message: string
						}) => ({
							title: item?.activityName,
							description: (
								<>
									<div>{item?.assigneeName}</div>
									<div>{item?.endTime}</div>
									<div>{item?.message}</div>
								</>
							),
						}),
					)
					const sCurrent = res?.data?.filter(
						(item: any) => item?.nodeType === 1,
					)
					setItemsProcess(() => step)
					const len = Number(sCurrent?.length) - 1
					setStepsCurrent(() => len)
				}
			})
		}

		// 根据路由判断当前页面状态
		useEffect(() => {
			const {id} = location.query
			const hrefs = window.location.href
			getDetail(id)
			getApprovalDetail(id)
			if (hrefs.includes('view')) {
				setType('view')
			} else {
				// 详情初始化
				setType('process')
			}
		}, [optionParams])

		const onSubmit = async () => {
			const formData = await toExamineForm.validateFields()
			const {id, processId} = location.query
			if(formData.pass===2){
				processRecordSave({
					bizType: 10,
					bizNo: routerQuery?.id,
					processId:routerQuery.processId,
				})
			}
			batchApproval([{processId, id, reviewerId: userId, ...formData}])
				.then((res: any) => {
					if (res?.success) {
						message.success(res?.msg)
						dispatch({
							type: 'global/deleteTabs',
							payload: currentRoute,
						})
						history.push({
							pathname: '/merchantCenter/commodityPlan/list',
						})
					}
				})
				.catch((err: any) => {
					message.error(err)
				})
		}

		const driverColumns: any = [
			{
				title: '序号',
				dataIndex: 'order',
				align: 'center',
				width: 70,
				render(text: any, record: any, index: any) {
					return <span>{index + 1}</span>
				},
			},
			{
				title: '司机奖励ID',
				dataIndex: 'activityCode',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any, record: any) => (
					<>
						{text ? (
							<Button
								type="link"
								size="small"
								onClick={() => {
									history.push({
										pathname:
											'/merchantCenter/driverRewardRules/detail',
										query: {
											pageType: 'detail',
											id: record?.awardCode,
											rewardId: record?.activityCode,
										},
									})
								}}>
								{text}
							</Button>
						) : (
							'--'
						)}
					</>
				),
			},
			{
				title: '活动名称',
				dataIndex: 'activityName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '奖励类型',
				dataIndex: 'subsidyOrdertype',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '审核状态',
				dataIndex: 'auditStatus',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => {
					const obj: any = auditStatus?.filter(
						(item: {key: any; label: any}) =>
							Number(item.key) === Number(text),
					)
					return obj[0] ? (
						<Tag color="processing">{obj[0].label}</Tag>
					) : (
						'--'
					)
				},
			},
			{
				title: '开始时间',
				dataIndex: 'beginTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '结束时间',
				dataIndex: 'endTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '主体',
				dataIndex: 'subjectName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '城市',
				dataIndex: 'cityName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: () => <span>{cityName || '--'}</span>,
			},
			{
				title: '所属公司',
				dataIndex: 'affiliatedCompany',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '品牌/车型/车系',
				dataIndex: 'brandInfo',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '租期',
				dataIndex: 'leaseTerm',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '操作',
				key: 'action',
				align: 'center',
				fixed: 'right',
				width: 250,
				render: (text: any, record: any) => (
					<div>
						<Button
							type="link"
							size="small"
							onClick={() => {
								history.push({
									pathname:
										'/merchantCenter/driverRewardRules/detail',
									query: {
										pageType: 'detail',
										id: record?.awardCode,
										rewardId: record?.activityCode,
									},
								})
							}}>
							查看
						</Button>
					</div>
				),
			},
		]

		const channelColumns: any = [
			{
				title: '序号',
				dataIndex: 'order',
				align: 'center',
				width: 70,
				render(text: any, record: any, index: any) {
					return <span>{index + 1}</span>
				},
			},
			{
				title: '渠道奖励编码',
				dataIndex: 'activityCode',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any, record: any) => (
					<>
						{text ? (
							<Button
								type="link"
								size="small"
								onClick={() => {
									history.push({
										pathname:
											'/merchantCenter/channelRule/detail',
										query: {
											pageType: 'detail',
											id: record.awardCode,
										},
									})
								}}>
								{text}
							</Button>
						) : (
							'--'
						)}
					</>
				),
			},
			{
				title: '活动名称',
				dataIndex: 'activityName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '渠道类型一级',
				dataIndex: 'channelTypeFirstlevel',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '渠道类型二级',
				dataIndex: 'channelTypeSecondary',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '状态',
				dataIndex: 'auditStatus',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<Tag color="processing">{text || '--'}</Tag>
				),
			},
			{
				title: '开始时间',
				dataIndex: 'beginTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '结束时间',
				dataIndex: 'endTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '主体',
				dataIndex: 'subjectName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '城市',
				dataIndex: 'cityName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: () => <span>{cityName || '--'}</span>,
			},
			{
				title: '所属公司',
				dataIndex: 'affiliatedCompany',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '品牌/车型/车系',
				dataIndex: 'brandInfo',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '租期',
				dataIndex: 'leaseTerm',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '操作',
				key: 'action',
				align: 'center',
				fixed: 'right',
				width: 250,
				render: (text: any, record: any) => (
					<div>
						<Button
							type="link"
							size="small"
							onClick={() => {
								history.push({
									pathname:
										'/merchantCenter/channelRule/detail',
									query: {
										pageType: 'detail',
										id: record.awardCode,
									},
								})
							}}>
							查看
						</Button>
					</div>
				),
			},
		]
		const optionColumns: any = [
			{
				title: '操作人',
				dataIndex: 'logPersonname',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '操作内容',
				dataIndex: 'logRemark',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '操作时间',
				dataIndex: 'logTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
		]
		return (
			<div className={styles.admittanceAdd}>
				<div className={`${styles.content}`}>
					{type === 'view' ? (
						<Row className="btnList">
							<Col
								xs={{span: 4, offset: 1}}
								lg={{span: 5, offset: 2}}
							/>
							<Col xs={{span: 14}} lg={{span: 12}}>
								<Row justify="space-around" align="middle">
									<Col span={24}>
										<Space size={16}>
											{btnList?.map((item: any) => (
												<>
													<Button
														type={
															btnKey === item.id
																? 'primary'
																: 'default'
														}
														onClick={() => {
															scrollToAnchor(
																item.id,
															)
															setBtnKey(
																() => item.id,
															)
														}}>
														{item?.name}
													</Button>
												</>
											))}
										</Space>
									</Col>
								</Row>
							</Col>
						</Row>
					) : null}
					<Collapse
							defaultActiveKey={['1', '2', '3', '4', '5', '6']}
							ghost
							expandIconPosition="end">
								<Panel
									header={customizeHeader('审批状态')}
									key="5"
									id="d5">
									{routerQuery?.orgId && routerQuery?.processId && (type === 'view' || type === 'process') ?(
										<Examine
											ref={examineRef}
											examineType={false}
											orgId={routerQuery?.orgId}
											processInstanceId={routerQuery?.processId}
											bizType={10}
											bizNo={routerQuery?.id}
											
										/>
									):(<></>)}
								</Panel>
						</Collapse>
					{type === 'process' ? (
							<Collapse
								defaultActiveKey={['1', '2', '3', '4', '5', '6']}
								ghost
								expandIconPosition="end">
									<Panel
										header={customizeHeader('审批信息')}
										key="6"
										id="d6">
											<div className="processTitle">
												<div className="title">
													审核
													<span className="bz">
														（注：审核商品方案时会将关联的司机奖励和渠道奖励规则一同审批）
													</span>
												</div>
											</div>
											<Form
												form={toExamineForm}
												className="toExamineForm"
												name="basic"
												layout="horizontal"
												labelCol={{flex: '100px'}}
												labelAlign="right"
												labelWrap
												initialValues={{remember: true}}
												autoComplete="off">
												<Row gutter={12}>
													<Col
														sm={{span: 24}}
														md={{span: 12}}
														lg={{span: 8}}>
														<Form.Item
															label="审核状态"
															name="pass"
															rules={[
																{
																	required: true,
																	message: '请选择审核状态',
																},
															]}>
															<Radio.Group>
																<Radio value={1}>
																	审核通过
																</Radio>
																<Radio value={2}>
																	审核驳回
																</Radio>
															</Radio.Group>
														</Form.Item>
													</Col>
													<Col span={24} />
													<Col
														sm={{span: 24}}
														md={{span: 12}}
														lg={{span: 8}}>
														<Form.Item
															label="处理意见"
															name="message">
															<TextArea
																maxLength={200}
																placeholder="请填写处理意见，不超过200个字符"
																autoSize={{
																	minRows: 3,
																	maxRows: 6,
																}}
															/>
														</Form.Item>
													</Col>
												</Row>
											</Form>
										</Panel>
								</Collapse>
					) : null}

					<Collapse
						defaultActiveKey={['1', '2', '3', '4', '5', '6']}
						ghost
						expandIconPosition="end">
						<Panel
							header={customizeHeader('基础信息')}
							key="1"
							id="d1">
							<Form
								form={form}
								name="basic"
								layout="horizontal"
								labelCol={{flex: '120px'}}
								labelAlign="right"
								labelWrap
								initialValues={{remember: true}}
								autoComplete="off"
								disabled>
								<Row gutter={12}>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="商品方案名称"
											name="commodityName">
											<Input
												placeholder="请输入商品方案名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="主体名称"
											name="subjectId"
											rules={[{required: true}]}>
											<Select
												placeholder="请选择主体名称"
												fieldNames={{
													value: 'id',
													label: 'name',
												}}
												allowClear
												options={[...mainCompany]}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="所属公司"
											name="affiliatedCompanyId"
											rules={[{required: true}]}>
											<TreeSelect
												showSearch
												allowClear
												style={{width: '100%'}}
												dropdownStyle={{
													maxHeight: 400,
													overflow: 'auto',
												}}
												placeholder="请选择"
												treeDefaultExpandAll
												fieldNames={{
													label: 'name',
													value: 'id',
												}}
												treeDataSimpleMode
												treeData={companyData}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="城市名称"
											name="city"
											rules={[{required: true}]}>
											<Cascader
												allowClear
												fieldNames={{
													label: 'name',
													value: 'id',
													children: 'cityInfoList',
												}}
												options={citysList}
												placeholder="请选择城市名称"
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="品牌/车系/车型"
											name="brandId"
											rules={[{required: true}]}>
											<Select
												allowClear
												placeholder="请选择品牌/车系/车型"
												fieldNames={{
													value: 'id',
													label: 'fullName',
												}}
												options={[...carTypeList]}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="车辆星级"
											name="carStarId"
											rules={[{required: true}]}>
											<Select
												allowClear
												placeholder="请选择车辆星级"
												fieldNames={{
													value: 'dictKey',
													label: 'dictValue',
												}}
												options={[...dict.star_rating]}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单类型"
											name="rentTypeId"
											rules={[{required: true}]}>
											<Select
												allowClear
												placeholder="请选择订单类型"
												fieldNames={{
													value: 'code',
													label: 'name',
												}}
												options={[...orderType]}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="押金"
											name="mortgageAmount"
											getValueFromEvent={
												(event: any) =>
													event.target.value.replace(
														/^(-)*(\d+)\.(\d\d).*$/,
														'$1$2.$3',
													) // 只能输入两位小数
											}
											rules={[
												{
													required: true,
													pattern: twoDecimalPattern,
													message:
														'请输入正确的押金金额',
												},
											]}>
											<Input
												placeholder="请输入押金"
												maxLength={20}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="定金"
											name="depositAmount"
											getValueFromEvent={
												(event: any) =>
													event.target.value.replace(
														/^(-)*(\d+)\.(\d\d).*$/,
														'$1$2.$3',
													) // 只能输入两位小数
											}
											rules={[
												{
													required: true,
													pattern: twoDecimalPattern,
													message:
														'请输入正确的定金金额',
												},
											]}>
											<Input
												placeholder="请输入定金"
												maxLength={20}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="开始时间"
											name="beginTime"
											rules={[{required: true}]}>
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col sm={{span: 12}}>
										<Form.Item
											label="结束时间"
											name="endTime"
											rules={[{required: true}]}>
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item label="备注" name="remarks">
											<TextArea
												maxLength={200}
												placeholder="请填写备注信息，不超过200个字符"
												autoSize={{
													minRows: 3,
													maxRows: 6,
												}}
											/>
										</Form.Item>
									</Col>
								</Row>
							</Form>
						</Panel>
						<Panel
							header={customizeHeader('价格信息')}
							key="2"
							id="d2">
							<>
								{rentTypeId === '1' || rentTypeId === '5' ? (
									<OrderTypeOne
										type={type}
										data={form.getFieldsValue()}
										costitemList={costitemList}
										setCostitemList={(res: any) => {
											setCostitemList(() => res)
										}}
									/>
								) : null}
								{rentTypeId === '2' || rentTypeId === '3' ? (
									<OrderTypeThree
										type={type}
										data={form.getFieldsValue()}
										costitemList={costitemList}
										setCostitemList={(res: any) => {
											setCostitemList(() => res)
										}}
									/>
								) : null}
								{rentTypeId === '4' ? (
									<OrderTypeTwo
										type={type}
										data={form.getFieldsValue()}
										costitemList={costitemList}
										setCostitemList={(res: any) => {
											setCostitemList(() => res)
										}}
									/>
								) : null}
							</>
						</Panel>
						<Panel
							header={customizeHeader('关联的司机奖励')}
							id="d3"
							key="3">
							<>
								<CustomTable
									columns={driverColumns}
									pagination={false}
									dataSource={driverSourse}
								/>
							</>
						</Panel>
						<Panel
							header={customizeHeader('关联的渠道奖励')}
							id="d4"
							key="4">
							<>
								<CustomTable
									columns={channelColumns}
									pagination={false}
									dataSource={channelSourse}
								/>
							</>
						</Panel>
						
						<Panel
							header={customizeHeader('操作记录')}
							key="6"
							id="d6">
							<>
								<CustomTable
									params={optionParams}
									columns={optionColumns}
									pagination
									total={optionTotal}
									scroll={{y: 500}}
									callback={(pagination: any) => {
										setOptionParams(pagination)
									}}
									kid="id"
									loading={optionLoading}
									dataSource={optionSourse}
								/>
							</>
						</Panel>
					</Collapse>
					<div className={styles.wrap}>
						{type === 'process' ? (
							<Button type="primary" onClick={() => onSubmit()}>
								提交
							</Button>
						) : null}
						<Button
							onClick={() => {
								dispatch({
									type: 'global/deleteTabs',
									payload: currentRoute,
								})
								history.push({
									pathname:
										'/merchantCenter/commodityPlan/list',
								})
							}}>
							取消
						</Button>
					</div>
				</div>
			</div>
		)
	},
)
export default connect(({user, global}: any) => ({user, global}))(view)
